// // 实现新增任务
// var addTaskButton = document.querySelector('.nav button');
// addTaskButton.onclick = function () {
//     // 1. 获取到任务内容的输入框
//     var input = document.querySelector('.nav input');
//     // 2. 获取到输入框内容
//     var taskContent = input.value;
//     // 3. 根据内容新建一个元素节点
//     var row = document.createElement('div');
//     row.className = 'row';
//     var checkbox = document.createElement('input');
//     checkbox.type = 'checkbox';
//     var span = document.createElement('span');
//     span.innerHTML = taskContent;
//     var button = document.createElement('button');
//     button.innerHTML = '删除';
//     row.appendChild(checkbox);
//     row.appendChild(span);
//     row.appendChild(button);
//     // 4. 把新节点插入到 todo 中
//     var todo = document.querySelector('.todo');
//     todo.appendChild(row);

// // 修改 addTaskButton.onclick
//     // 5. 给 checkbox 注册点击事件
//     checkbox.onclick = function () {
//     // 
//         var row = this.parentNode;
//         // 注意! 是先触发 checked 为 true, 然后再调用 onclick 函数
//         if (this.checked) {
//             var target = document.querySelector('.done');
//         } else {
//             var target = document.querySelector('.todo');
//         }
//         target.appendChild(row);
//     }

// // 修改 addTaskButton.onclick
//     // 上方的部分不变...
//     // 6. 给删除按钮注册点击事件
//     button.onclick = function () {
//         var row = this.parentNode;
//         var grandParent = row.parentNode;
//         grandParent.removeChild(row);
//     }
// }

// 1. 封装通用删除函数（所有删除按钮共用）
function bindDeleteEvent(deleteBtn) {
    deleteBtn.onclick = function () {
        var row = this.parentNode; // 任务行
        var grandParent = row.parentNode; // 父容器（todo/done）
        grandParent.removeChild(row); // 删除任务
    }
}

// 2. 给初始任务的删除按钮绑定事件
var initialDeleteBtn = document.querySelector('.todo .row button');
bindDeleteEvent(initialDeleteBtn);

// 3. 实现新增任务
var addTaskButton = document.querySelector('.nav button');
addTaskButton.onclick = function () {
    // 3.1 获取输入框和内容（添加空值判断）
    var input = document.querySelector('.nav input');
    var taskContent = input.value.trim(); // 去除前后空格
    if (!taskContent) { // 空值判断：输入为空时提示并终止
        alert('请输入任务内容！');
        return;
    }

    // 3.2 新建任务元素
    var row = document.createElement('div');
    row.className = 'row';

    var checkbox = document.createElement('input');
    checkbox.type = 'checkbox';

    var span = document.createElement('span');
    span.innerHTML = taskContent;

    var deleteBtn = document.createElement('button');
    deleteBtn.innerHTML = '删除';
    // 3.3 给新增任务的删除按钮绑定事件
    bindDeleteEvent(deleteBtn);

    // 3.4 组装任务行
    row.appendChild(checkbox);
    row.appendChild(span);
    row.appendChild(deleteBtn);

    // 3.5 插入到“未完成”列表
    var todo = document.querySelector('.todo');
    todo.appendChild(row);

    // 3.6 清空输入框（优化体验）
    input.value = '';

    // 3.7 给复选框绑定“切换完成/未完成”事件
    checkbox.onclick = function () {
        var row = this.parentNode;
        var targetContainer = this.checked ? 
            document.querySelector('.done') : // 勾选→移到“已完成”
            document.querySelector('.todo');  // 取消勾选→移到“未完成”
        targetContainer.appendChild(row);
    }
}
